<template>
  <!-- 内容解析 -->
  <view>
    <view class="fz-16 default-color mb-12 font-bold">
      <text>{{title}}</text>
    </view>
    <template v-for="(v, i) in getDetails" :key="i">
      <!-- 文字 -->
      <view v-if="v.moduleType === ModuleTypeEnum.Text" class="text-item fz-14 default-color mb-12">
        <text user-select>{{ v.text }}</text>
      </view>
      <!-- 大图 -->
      <view v-if="v.moduleType === ModuleTypeEnum.LargeImage && isArray(v.fileUrls)" class="mb-12">
        <TImage :src="v.fileUrls?.[0]" width="100%" mode="widthFix" preview />
      </view>
      <!-- 小图 -->
      <FormUploadFile
        v-if="v.moduleType === ModuleTypeEnum.SmallImage"
        :row="3"
        width="218rpx"
        height="218rpx"
        v-model="v.fileUrls"
        disabled
      ></FormUploadFile>
      <!-- 视频 -->
      <FormUploadFile
        v-if="v.moduleType === ModuleTypeEnum.Video"
        width="686rpx"
        height="380rpx"
        v-model="v.fileUrls"
        media-type="video"
        disabled
      ></FormUploadFile>
    </template>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import {
    ModuleTypeEnum,
    type IEditBusinessOpportunitiesDetailEnum,
  } from '@/enums/editBusinessOpportunitiesDetailEnum';
  import { isJSON } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { isArray } from 'lodash-es';
  import { computed } from 'vue';
  import FormUploadFile from '@/components/Form/components/upload/FormUploadFile.vue';

  const props = defineProps({
    data: propTypes.string,
    title: propTypes.string,
  });

  const getDetails = computed<IEditBusinessOpportunitiesDetailEnum[]>(() => {
    return isJSON(props.data) || [];
  });
</script>

<style lang="scss" scoped>
  .text-item {
    white-space: pre-wrap;
    word-break: break-all;
  }
</style>
